<template>
    <div class="destination-detail">
        <!-- 顶部图片展示区 -->
        <div class="hero-section">
            <img :src="destination.image" :alt="destination.name" class="main-image" />
            <div class="image-overlay">
                <h1>{{ destination.name }}</h1>
                <div class="price-tag">￥{{ destination.price }}起</div>
            </div>
        </div>

        <!-- 主要内容区 -->
        <div class="content-container">
            <!-- 左侧信息区 -->
            <div class="info-section">
                <h2 class="section-title">{{ destination.slogan }}</h2>
                <p class="description">{{ destination.description }}</p>

                <!-- 特色标签 -->
                <div class="tag-section">
                    <span v-for="(tag, index) in destination.tags" :key="index" class="tag"
                        :style="{ backgroundColor: tagColors[index % tagColors.length] }">
                        {{ tag }}
                    </span>
                </div>

                <!-- 亮点列表 -->
                <div class="highlights">
                    <h3>行程亮点</h3>
                    <ul>
                        <li v-for="(highlight, index) in destination.highlights" :key="index">
                            <span class="icon">✨</span> {{ highlight }}
                        </li>
                    </ul>
                </div>

                <!-- 价格套餐 -->
                <div class="packages">
                    <h3>套餐选择</h3>
                    <div class="package-options">
                        <div v-for="(pkg, index) in destination.packages" :key="index"
                            :class="{ active: selectedPackage === index }" @click="selectPackage(index)">
                            <h4>{{ pkg.name }}</h4>
                            <p class="duration">{{ pkg.duration }}</p>
                            <p class="price">￥{{ pkg.price }}</p>
                            <ul>
                                <li v-for="(item, i) in pkg.inclusions" :key="i">{{ item }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧预订卡片 -->
            <div class="booking-card">
                <div class="card-header">
                    <h3>立即预订</h3>
                    <div class="price-display">
                        <span class="from">最低价</span>
                        <span class="price">￥{{ selectedPackagePrice }}</span>
                        <span class="unit">起/人</span>
                    </div>
                </div>

                <div class="date-picker">
                    <label>出发日期</label>
                    <input type="date" v-model="departureDate" :min="today" />
                </div>

                <div class="travelers">
                    <label>出行人数</label>
                    <div class="counter">
                        <button @click="decrement">-</button>
                        <span>{{ travelerCount }}</span>
                        <button @click="increment">+</button>
                    </div>
                </div>

                <div class="total">
                    <span>预估总价</span>
                    <span>￥{{ calculateTotal }}</span>
                </div>

                <button class="book-button" @click="handleBooking">
                    {{ isBooking ? "预订中..." : "立即预订" }}
                </button>

                <div class="notice">
                    <p>🎁 预订即赠{{ destination.gift }}</p>
                    <p>✅ 免费取消政策</p>
                </div>
            </div>
        </div>

        <!-- 推荐目的地 -->
        <div class="recommendations">
            <h2>您可能也喜欢</h2>
            <div class="destination-grid">
                <div v-for="item in recommendedDestinations" :key="item.id" class="destination-card"
                    @click="navigateToDestination(item.id)">
                    <img :src="item.image" :alt="item.name" />
                    <div class="card-info">
                        <h3>{{ item.name }}</h3>
                        <p class="price">￥{{ item.price }}起</p>
                        <div class="tags">
                            <span v-for="(tag, i) in item.tags.slice(0, 2)" :key="i">{{
                                tag
                                }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref, computed } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
    name: "DestinationDetail",
    setup() {
        const router = useRouter();
        const today = new Date().toISOString().split("T")[0];

        // 当前目的地数据
        const destination = ref({
            id: "paris",
            name: "巴黎",
            image: "/images/destinations/paris-detail.jpg",
            price: 5999,
            slogan: "浪漫之都，艺术与美食的天堂",
            description: "巴黎是法国的首都和最大城市，以其浪漫的氛围、丰富的艺术遗产和美食文化闻名于世。从埃菲尔铁塔到卢浮宫，从塞纳河畔到蒙马特高地，每个角落都散发着独特的魅力。",
            tags: ["浪漫", "美食", "艺术", "购物", "历史"],
            highlights: [
                "埃菲尔铁塔VIP通道门票",
                "塞纳河游船晚餐体验",
                "卢浮宫专业中文讲解",
                "蒙马特高地艺术之旅",
                "米其林餐厅预订服务"
            ],
            packages: [
                {
                    name: "经典浪漫套餐",
                    duration: "6天5晚",
                    price: 5999,
                    inclusions: [
                        "五星级酒店住宿",
                        "往返经济舱机票",
                        "城市观光巴士通票",
                        "旅行保险"
                    ]
                },
                {
                    name: "奢华艺术之旅",
                    duration: "8天7晚",
                    price: 8999,
                    inclusions: [
                        "豪华酒店住宿",
                        "商务舱机票",
                        "私人导游服务",
                        "特色餐厅全包"
                    ]
                },
                {
                    name: "自由行套餐",
                    duration: "5天4晚",
                    price: 4999,
                    inclusions: ["四星级酒店住宿", "往返经济舱机票", "机场接送服务"]
                }
            ],
            gift: "巴黎地铁周卡+塞纳河游船票"
        });

        // 推荐目的地数据
        const recommendedDestinations = ref([
            {
                id: "tokyo",
                name: "东京",
                image: "/images/destinations/tokyo-thumb.jpg",
                price: 4599,
                slogan: "",
                description: "",
                tags: ["动漫", "购物", "美食"],
                highlights: [],
                packages: [],
                gift: ""
            },
            {
                id: "maldives",
                name: "马尔代夫",
                image: "/images/destinations/maldives-thumb.jpg",
                price: 8999,
                slogan: "",
                description: "",
                tags: ["海岛", "蜜月", "潜水"],
                highlights: [],
                packages: [],
                gift: ""
            },
            {
                id: "newyork",
                name: "纽约",
                image: "/images/destinations/newyork-thumb.jpg",
                price: 6499,
                slogan: "",
                description: "",
                tags: ["城市", "购物", "文化"],
                highlights: [],
                packages: [],
                gift: ""
            }
        ]);

        // UI状态
        const tagColors = ref(["#FF6B6B", "#4ECDC4", "#45B7D1", "#A37EBD"]);
        const selectedPackage = ref(0);
        const departureDate = ref(today);
        const travelerCount = ref(2);
        const isBooking = ref(false);

        // 计算属性
        const selectedPackagePrice = computed(() => {
            return destination.value.packages[selectedPackage.value].price;
        });

        const calculateTotal = computed(() => {
            return selectedPackagePrice.value * travelerCount.value;
        });

        // 方法
        const selectPackage = (index) => {
            selectedPackage.value = index;
        };

        const increment = () => {
            if (travelerCount.value < 10) travelerCount.value++;
        };

        const decrement = () => {
            if (travelerCount.value > 1) travelerCount.value--;
        };

        const handleBooking = () => {
            isBooking.value = true;
            setTimeout(() => {
                alert(`成功预订 ${destination.value.name} 行程！`);
                isBooking.value = false;
            }, 1500);
        };

        const navigateToDestination = (id) => {
            router.push(`/destination/${id}`);
        };

        return {
            destination,
            recommendedDestinations,
            tagColors,
            selectedPackage,
            selectedPackagePrice,
            departureDate,
            travelerCount,
            isBooking,
            today,
            calculateTotal,
            selectPackage,
            increment,
            decrement,
            handleBooking,
            navigateToDestination
        };
    }
});
</script>

<style scoped>
.destination-detail {
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #333;
}

.hero-section {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
}

.image-overlay h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.price-tag {
    display: inline-block;
    background-color: #ff6b6b;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 1.5rem;
    font-weight: bold;
}

.content-container {
    display: flex;
    gap: 30px;
    padding: 40px 20px;
}

.info-section {
    flex: 2;
}

.section-title {
    font-size: 2rem;
    color: #ff6b6b;
    margin-bottom: 20px;
}

.description {
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.tag-section {
    margin: 25px 0;
}

.tag {
    display: inline-block;
    padding: 6px 12px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 15px;
    color: white;
    font-size: 0.9rem;
}

.highlights {
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 10px;
    margin: 30px 0;
}

.highlights h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.highlights ul {
    list-style: none;
    padding: 0;
}

.highlights li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.highlights li:last-child {
    border-bottom: none;
}

.icon {
    margin-right: 10px;
    font-size: 1.2rem;
}

.packages {
    margin-top: 40px;
}

.packages h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.package-options {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.package-options>div {
    min-width: 250px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.package-options>div:hover {
    border-color: #ff6b6b;
}

.package-options>div.active {
    border: 2px solid #ff6b6b;
    background-color: #fff5f5;
}

.package-options h4 {
    color: #ff6b6b;
    margin-bottom: 10px;
}

.duration {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.package-options .price {
    font-size: 1.3rem;
    font-weight: bold;
    margin: 10px 0;
}

.package-options ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
    font-size: 0.9rem;
}

.package-options li {
    padding: 5px 0;
    position: relative;
    padding-left: 15px;
}

.package-options li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ff6b6b;
}

.booking-card {
    flex: 1;
    position: sticky;
    top: 20px;
    height: fit-content;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 25px;
}

.card-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.card-header h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.price-display {
    display: flex;
    align-items: baseline;
}

.price-display .from {
    font-size: 0.9rem;
    color: #666;
    margin-right: 5px;
}

.price-display .price {
    font-size: 2rem;
    font-weight: bold;
    color: #ff6b6b;
}

.price-display .unit {
    font-size: 0.9rem;
    color: #666;
    margin-left: 5px;
}

.date-picker,
.travelers {
    margin-bottom: 20px;
}

.date-picker label,
.travelers label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.date-picker input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
}

.travelers .counter {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.travelers .counter button {
    background: none;
    border: none;
    font-size: 1.5rem;
    padding: 0 15px;
    cursor: pointer;
    height: 45px;
}

.travelers .counter button:hover {
    background-color: #f5f5f5;
}

.travelers .counter span {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
}

.total {
    display: flex;
    justify-content: space-between;
    margin: 25px 0;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 1.1rem;
    font-weight: bold;
}

.book-button {
    width: 100%;
    padding: 15px;
    background-color: #ff6b6b;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.book-button:hover {
    background-color: #e05555;
}

.notice {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #666;
}

.notice p {
    margin: 8px 0;
}

.recommendations {
    padding: 40px 20px;
    border-top: 1px solid #eee;
}

.recommendations h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.destination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.destination-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s;
}

.destination-card:hover {
    transform: translateY(-5px);
}

.destination-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card-info {
    padding: 15px;
}

.card-info h3 {
    margin: 5px 0;
    font-size: 1.2rem;
}

.card-info .price {
    color: #ff6b6b;
    font-weight: bold;
    margin: 8px 0;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tags span {
    background-color: #f0f0f0;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #555;
}

@media (max-width: 768px) {
    .content-container {
        flex-direction: column;
    }

    .hero-section {
        height: 300px;
    }

    .image-overlay h1 {
        font-size: 2rem;
    }
}
</style>